<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="An enterprise-class UI design language and React-based implementation with a set of high-quality React components, one of best React UI library for enterprises">
    <title>Ant Design - A UI Design Language</title>
    <link rel="icon" href="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="/index-1.css"/>
    <link rel="stylesheet" type="text/css" href="/index-2.css"/>
    <style id="nprogress-style">
      #nprogress { display: none }
    </style>
    <link rel="stylesheet/less" type="text/css" href="/color.less"/>
    <script src="https://gw.alipayobjects.com/os/lib/??es6-shim/0.35.3/es6-sham.min.js,es6-shim/0.35.3/es6-shim.min.js"></script>
    <!--[if lte IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script>
    if (!window.Intl) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
    }
    </script>
    <script>
    (function() {
      function isLocalStorageNameSupported() {
        var testKey = 'test';
        var storage = window.localStorage;
        try {
          storage.setItem(testKey, '1');
          storage.removeItem(testKey);
          return true;
        } catch (error) {
          return false;
        }
      }
      // 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
      var pathname = location.pathname;

      function isZhCN(pathname) {
        return /-cn\/?$/.test(pathname);
      }
      function getLocalizedPathname(path, zhCN) {
        var pathname = path.startsWith('/') ? path : '/' + path;
        if (!zhCN) { // to enUS
          return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
        } else if (pathname === '/') {
          return '/index-cn';
        } else if (pathname.endsWith('/')) {
          return pathname.replace(/\/$/, '-cn/');
        }
        return pathname + '-cn';
      }

      // 兼容旧的 URL， `?locale=...`
      var queryString = location.search;
      if (queryString) {
        var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
        if (isZhCNConfig && !isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
        }
      }

      // 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
      if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
        var lang = (window.localStorage && localStorage.getItem('locale')) || ((navigator.language || navigator.browserLanguage).toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
        // safari is 'zh-cn', while other browser is 'zh-CN';
        if ((lang === 'zh-CN') !== isZhCN(pathname)) {
          location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
        }
      }
      document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
    })()
    </script>
  </head>
  <body>
    <div id="react-content">
      <div class="page-wrapper"><header id="header" class="clearfix"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-5 ant-col-xl-5 ant-col-xxl-4"><a id="logo" href="/"><img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"/><img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DkKNubTaaVsKURhcVGkh.svg"/></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-18 ant-col-lg-19 ant-col-xl-19 ant-col-xxl-20"><div id="search-box"><i class="anticon anticon-search"><svg viewBox="64 64 896 896" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></i><input type="text" placeholder="Search in ant.design" class="ant-input"/></div><button type="button" class="ant-btn header-lang-button ant-btn-sm ant-btn-background-ghost"><span>中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled"><div class="ant-select-selection
            ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0"><div class="ant-select-selection__rendered"><div class="ant-select-selection-selected-value" title="3.10.3" style="display:block;opacity:1">3.10.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none" unselectable="on"><i class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i></span></div></div><ul class="ant-menu menu-site ant-menu-light ant-menu-root ant-menu-horizontal" id="nav" role="menu"><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/"><span>Home</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem"><a href="/docs/spec/introduce"><span>Guidelines</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="/docs/react/introduce"><span>Components</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display:none" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li><li class="ant-menu-item" role="menuitem"><a href="http://pro.ant.design" class="header-link" target="_blank" rel="noopener noreferrer"><span>PRO</span></a></li><li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility:hidden;position:absolute" role="menuitem"><div class="ant-menu-submenu-title" aria-expanded="false" aria-haspopup="true"><span>···</span><i class="ant-menu-submenu-arrow"></i></div></li></ul></div></div></header><div class="main-wrapper"><div class="ant-row"><div class="main-menu ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-6 ant-col-xl-5 ant-col-xxl-4"><ul class="ant-menu aside-container menu-site ant-menu-light ant-menu-root ant-menu-inline" role="menu"><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Ant Design$Menu" aria-haspopup="true"><h4>Ant Design</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Ant Design$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/introduce"><span>Introduction</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/values"><span>Design Values</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/cases"><span>Cases</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true"><h4>Principles</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Principles$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/proximity"><span>Proximity</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/alignment"><span>Alignment</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/contrast"><span>Contrast</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/repetition"><span>Repetition</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/direct"><span>Make it Direct</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/stay"><span>Stay on the Page</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/lightweight"><span>Keep it Lightweight</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/invitation"><span>Provide an Invitation</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/transition"><span>Use Transition</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/reaction"><span>React Immediately</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Visual$Menu" aria-haspopup="true"><h4>Visual</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Visual$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/colors"><span>Colors</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/layout"><span>Layout</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/font"><span>Font</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/icon"><span>Icons</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Patterns$Menu" aria-haspopup="true"><h4>Patterns</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Patterns$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/overview"><span>Overview</span><span class="chinese"></span></a></li><li class="ant-menu-item ant-menu-item-selected" role="menuitem" style="padding-left:80px"><a href="/docs/spec/copywriting"><span>Copywriting</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/navigation"><span>Navigation</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/data-entry"><span>Data Entry</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/data-display"><span>Data Display</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/feedback"><span>Feedback</span><span class="chinese"></span></a></li></ul></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/spec/visual">Visualization</a></li><li class="ant-menu-item" role="menuitem" style="padding-left:40px"><a href="/docs/spec/motion">Motion</a></li><li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem"><div style="padding-left:40px" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Other$Menu" aria-haspopup="true"><h4>Other</h4><i class="ant-menu-submenu-arrow"></i></div><ul id="Other$Menu" class="ant-menu  ant-menu-sub ant-menu-inline" role="menu"><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/download"><span>Resources</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/reference"><span>Reference</span><span class="chinese"></span></a></li><li class="ant-menu-item" role="menuitem" style="padding-left:80px"><a href="/docs/spec/work-with-us"><span>Work with Us</span><span class="chinese"></span></a></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-xl-19 ant-col-xxl-20"><article class="markdown"><div data-show="true" class="ant-alert ant-alert-warning ant-alert-no-icon"><span class="ant-alert-message"><span>This article has not been translated yet. Wanna help us out? <a href="https://github.com/ant-design/ant-design/issues/1471">See this issue on GitHub.</a></span></span><span class="ant-alert-description"></span></div><h1>Copywriting<a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/copywriting.md" target="_blank" rel="noopener noreferrer"><i class="anticon anticon-edit"><svg viewBox="64 64 896 896" class="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 0 0 0-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 0 0 9.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></i></a></h1><section class="markdown"><p>在界面中，我们需要通过对话的方式与用户产生共鸣。精准、清晰的语言会更容易让用户理解，合适的语气更容易让用户建立信任感。因此在界面设计时，文案也应当被重视。 在使用和书写文案时有以下几点需要注意：</p><ul><li><p>从用户角度出发</p></li><li><p>表述一致</p></li><li><p>重要的信息放在显著位置</p></li><li><p>专业、精准、完整</p></li><li><p>精简、友好、正面</p></li></ul></section><div class="toc-affix"><div class=""><ul class="toc"><li><a class="bisheng-toc-h2" href="#语言" title="语言">语言</a></li><li><a class="bisheng-toc-h2" href="#语气" title="语气">语气</a></li><li><a class="bisheng-toc-h2" href="#大小写和标点符号" title="大小写和标点符号">大小写和标点符号</a></li></ul></div></div><section class="markdown"><h2 id="语言"><span>语言</span><a href="#语言" class="anchor">#</a></h2><p>在界面中，文案是我们与用户沟通的基础，语言文字的表述也需要精心推敲，仔细设计。清晰、准确、简洁的文案设计能够让界面拥有更好的可用性，
同时让用户体验更加友好。</p><h3 id="明确表述立足点"><span>明确表述立足点</span><a href="#明确表述立足点" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/uBzzoUAMupDWPXFUeRIn.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/EOVTgwoOsYptbkUqpMKn.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">侧重在『我们』为用户提供了什么，而不是以用户视角的关注点为中心。</div></div></div><p>在表述内容时，关注点应该是用户和他们能用你的产品做什么，而不是你和你的产品在为他们做什么，所以内容表述的立足点很重要。</p><p>既然以用户为中心，文案就应该尽量以用户为主体来写作。</p><blockquote><p>注：当用户向后台反馈问题、提出建议或申诉时，使用『我们』是合理的语境，例如『我们将会审核你的申诉』。</p></blockquote><h3 id="精简语句"><span>精简语句</span><a href="#精简语句" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/dAcEgVUcAcUqbMjaEydw.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/xRUVqOQsBOqzdmZIQDLa.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description"></div></div></div><p>省略无用词汇，不重复用户已知事实；在绝大多数交互场景下，都无需界面描述出全部的细节。</p><p>尽量提供简短、易于快速获取的内容。</p><h3 id="使用用户熟悉的语言"><span>使用用户熟悉的语言</span><a href="#使用用户熟悉的语言" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/FOcLNnbiaZOTMRHAyeVZ.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/tUmMsssHDlGqlKbRwYlH.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">站在用户的角度，说用户熟悉的话。</div></div></div><p>使用简单、直接、易于理解的词汇，让内容和指示更容易被用户接受和理解。</p><p>间接、暧昧模糊的说法，生僻和过于『文雅』的用词，会增加用户的认知负荷，所以应当尽量避免使用这类用户无法识别的词汇。</p><h3 id="表述一致"><span>表述一致</span><a href="#表述一致" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/ToMaEybHQCrcAfcYRbxF.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">备注描述使用相同的介词。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/BUFFQwfvLqTLrOzaEccX.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">同一区块描述中出现了『受』和『被』两个不同的介词。</div></div></div><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/AAaXSGqNUBlZChkrMbYl.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">在同一页面、同一区域在语序上一致。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/DYCoXTphnpdkMMCtyMdN.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">语序上不一致，会影响用户理解成本。</div></div></div><div class="preview-image-boxes clearfix"><div class="preview-image-box"><div class="preview-image-wrapper"><img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/sNqQYWEJCAzCxcYCBGYD.png"/></div><div class="preview-image-title"></div><div class="preview-image-description">操作名称和目标页面的标题一致。</div></div></div><ul><li><p>描述同一个事物的词汇要保持统一;</p></li><li><p>上下文的语法、语种、语序要保持统一;</p></li><li><p>操作的名称和目标页面标题的名称保持一致。</p></li></ul><h3 id="重要的信息放在显著位置"><span>重要的信息放在显著位置</span><a href="#重要的信息放在显著位置" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/clWcgMqBypLAAosLQHes.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">在有限的空间内将重要的信息放在最前面（或通过高亮、留白等方式突出重要信息）。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/hSiLeNGgmeqWvVHCNoeE.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">用户最关心的信息内容藏在段落中，不易搜寻。</div></div></div><p>让用户第一眼看到最重要的内容，不用到段落中寻找。</p><blockquote><p>注：如考虑安全性问题时，隐私信息也可调整为『点击后可见』的方式。</p></blockquote><h3 id="完整、直接得阐述信息"><span>完整、直接得阐述信息</span><a href="#完整、直接得阐述信息" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/ioBKvBqCNzUwQDyjMiIa.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">用户可以从中了解了设置后会有什么好处。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/EiwnPMETQAmWlHSGAWEX.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">用户感受不到设置的意义，不会去设置。</div></div></div><p>当我们希望用户进行一个操作时，要专注于用户能得到什么，以及用户的感受。在操作前引导告知用户操作的目的或重要性，能促进用户更愿意去执行。</p><p><br/></p><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/dlAkFzezQEwtNnZDWpQh.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">相对于『失败』，『无法完成』是更加客观的结果，更容易让用户在心理上接受。用户需要知道在出现问题的情况下如何进行下一步操作。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/qqrgyclPnhBFgPEYsBXd.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">对于异常情况不是冷冰冰告诉你『失败』。</div></div></div><p>报错是 UI 中常见的功能，它同样是用户体验中不可小视的组成部分。当用户填写的内容出错的时候，你的报错信息应当符合用户的认知，用易于理解的方式表述出来。</p><h3 id="用词精准完整"><span>用词精准完整</span><a href="#用词精准完整" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/mCusyeTfzbyDCYxvwEPM.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">完整的表达。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/cugctFUEXcVUNnsZRLMD.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">不完整，有歧义或太口语化。</div></div></div><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/jvYzIkRbdICzNvxeVfBr.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">专业用语精准。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/TFhFTbqHlEXTMOyCxIvN.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">专业的行业用词有别字。</div></div></div><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/qIwLlXOyJQlAqFwWSUuo.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">时间信息的表述精准完整。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/HBCyJcXZYmtLECZUtjzE.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">时间信息的描述词不是具体的『日』、『月』，容易让用户产生困扰。</div></div></div><table style="font-size:12px;float:right;width:496px;margin-left:60px;margin-bottom:100px;clear:both"><tbody><tr><th style="border-bottom:2px solid #108ee9;width:20%">使用</th><th style="border-bottom:2px solid #f04134;width:25%">不使用</th><th>备注</th></tr><tr><th>其他</th><td>其它</td><td>『其他』的应用范围更广</td></tr><tr><th>抱歉</th><td>对不起</td><td>如果是我们系统造成的结果，可以使用『抱歉』，如果是用户自己造成的结果，不能使用。</td></tr><tr><th>验证码</th><td></td><td>4位或多位数字或字母图片，可有效防止黑客发起对账户的登录尝试。</td></tr><tr><th>校验码</th><td></td><td>手机或即时通讯工具收到的6位数字，用于验证用户的身份。</td></tr><tr><th>登录</th><td>登陆</td><td>登记记录用户输入的注册账号和密码。</td></tr><tr><th>此</th><td>该</td><td>当要表达当前事物时，『此』更加明确。</td></tr></tbody></table><p>通用基本用词要规范，不要写错字，词语表达要完整。</p><p>专业用语要精准，并是所属行业认可通用用词；时间的表述必须明确。</p><hr/><h2 id="语气"><span>语气</span><a href="#语气" class="anchor">#</a></h2><p>语言定义的是内容，而情绪和气氛更多的是通过语气来表达，并且同样的内容面对不同的用户我们可以使用不同的语气来表达；例如，我们对应专业的运维人员和小白用户应有不同的表达方式。</p><h3 id="拉近彼此的距离"><span>拉近彼此的距离</span><a href="#拉近彼此的距离" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/LXVkAEabvRXwOTYkewzV.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/KxSWWhUiCPYaadFucIEr.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">建议不要使用『您』，太过客气，让用户感觉有些疏远。</div></div></div><p>直接使用『你』、『我』来和用户对话，与用户建立亲密感。避免使用『您』，让用户感觉太过疏远。</p><p><br/></p><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/mkFlHfRJxVaFpCVnhJxz.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/SwzkNWboQRPncuORBPmL.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">同时出现了称谓『我』和『你』，用户会感到迷惑，不清楚到底指代对象是谁。</div></div></div><blockquote><p>注：不要在同一个句式中混用『你』和『我』，交互中指代混乱会让用户相当纠结。</p></blockquote><h3 id="友好、尊重用户"><span>友好、尊重用户</span><a href="#友好、尊重用户" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/SiyDiAnuljqDrZgcFiXn.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">引导用户正确输入内容。</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/ZSgEJWJJeOYBDDsenOuS.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">不能、不要、请勿都给人命令或强迫的感觉。</div></div></div><p>多给用户支持与鼓励，不要命令和强迫用户。</p><p>如果你想留住你的用户，当出错的时候就不要责怪用户。专注于解决问题，而不是指责。</p><h3 id="表述不应过于极端"><span>表述不应过于极端</span><a href="#表述不应过于极端" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/zXLrYMCesvdZXdSoJEcP.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/MTIsErHJIswPHVfUFQnI.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description">『绝不』过于绝对，让用户感到不适。</div></div></div><p>不要使用过于绝对的表述，这样会让用户觉得不适。</p><h2 id="大小写和标点符号"><span>大小写和标点符号</span><a href="#大小写和标点符号" class="anchor">#</a></h2><h3 id="英文名词大小写规范"><span>英文名词大小写规范</span><a href="#英文名词大小写规范" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/ruuIBHvkqfJrCNuWrGZZ.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/yEqZfFLnyUACJhprXCqt.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description"></div></div></div><p>产品名称全称，首字母大写。产品名称缩写需要全部大写，如：ESC、SLB 等；</p><blockquote><p>注：整个单词都大写不利于阅读和识别，应尽量避免这种用法。</p></blockquote><p><br/></p><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/aVOygdsFMYeQZJNWDouv.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/obNsZSLYKAqMtsXrEHYg.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description"></div></div></div><p>正确使用专有名词的大小写规范。</p><p><br/></p><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/sDSMymVeCJGoMJLBpoHe.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/tUQvbqMLPGFjwiywBmJP.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description"></div></div></div><p>全英文的标题，标签，菜单项等等都要遵循英文句式中首字母大写的规范。</p><h3 id="统计数据使用阿拉伯数字"><span>统计数据使用阿拉伯数字</span><a href="#统计数据使用阿拉伯数字" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/WOtjvzMQnfuAHJXcifgW.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description">阿拉伯数字的信息传递效率更高</div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/LhJSOSsQrMFCxtFHqNqL.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description"></div></div></div><p>这也是常见问题，用户对于数字的感知速度更快，使用数字而非文字表述会更加有效。</p><h3 id="省略不必要的标点"><span>省略不必要的标点</span><a href="#省略不必要的标点" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/QGpLpUFgZnTDzYJCeuun.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/fQhiFpjLcHJtJJGzElUT.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description"></div></div></div><p>为了帮助用户更加高效得扫视文本内容，可以省略不必要的断句点。</p><p>以下元素单独出现时可以省略标点：</p><ul><li><p>标签</p></li><li><p>标题</p></li><li><p>输入框下的提示</p></li><li><p>悬停文本中的提示</p></li><li><p>表格中的句子</p></li></ul><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/UMLpWSOrmsYFlozQFGXu.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/raqemTlQncDdOczUCKvo.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description"></div></div></div><p>以下元素单独出现时需要加上标点：</p><ul><li><p>多句或多段的文案和列表内容。</p></li><li><p>任何文字链前的句子。</p></li></ul><h3 id="谨慎使用感叹号"><span>谨慎使用感叹号</span><a href="#谨慎使用感叹号" class="anchor">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-compare"><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper good"><img class="preview-img no-padding good" src="https://gw.alipayobjects.com/zos/rmsportal/CJAEXjDelaghIOHZAxgh.png" alt="正确示范"/></div><div class="preview-image-title">正确示范</div><div class="preview-image-description"></div></div><div class="preview-image-box" style="width:50%"><div class="preview-image-wrapper bad"><img class="preview-img no-padding bad" src="https://gw.alipayobjects.com/zos/rmsportal/SgcrhDeaVpNmeFWRiJnc.png" alt="错误示范"/></div><div class="preview-image-title">错误示范</div><div class="preview-image-description"></div></div></div><p>感叹号会让文案显得过于激动，容易让气氛变得过于紧张。</p><blockquote><p>注：当向用户表达问候或祝贺时，使用『！』是合理的语境，例如『欢迎回到社区！』。</p></blockquote><h3 id="基本标点规范"><span>基本标点规范</span><a href="#基本标点规范" class="anchor">#</a></h3><table style="font-size:12px;float:right;width:496px;margin-left:60px;margin-bottom:100px"><tbody><tr><th>标点名称</th><th>字符</th><th>描述</th></tr><tr><th>空格</th><td></td><td>段落句子中的链接和文字之间增加空格；
全角字符和半角字符搭配时，需要添加空格，如：两个、2 个、50%。</td></tr><tr><th>句号</th><td>。</td><td>以下情况中不使用句号：输入框下的提示；表格中的句子；句末为文字链（链接前使用句号）；按钮和标题。</td></tr><tr><th>感叹号</th><td>！</td><td>只在需要表达强烈情感的情况下使用。</td></tr><tr><th>连接号</th><td>-</td><td>不使用中文全角的连接号。如：2012-11-12。</td></tr><tr><th>省略号</th><td>…</td><td>使用半角的『…』为省略号。</td></tr><tr><th>隐藏符号</th><td>*</td><td>多用于替换显示隐私信息。</td></tr></tbody></table><p>正确得使用标点符号会让句子看起来更清晰和具有可读性。</p><p>具体使用请参考1995年中国标准出版社出版的<a href="http://www.gddx.gov.cn/jjxjyb/resource/cms/2016/05/2016051420583039892.pdf">《标点符号用法》</a>，右图为重点列出的在设计中需要注意的部分。</p></section><section class="markdown api-container"></section></article></div></div><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-lg-18 ant-col-lg-offset-6 ant-col-xl-19 ant-col-xl-offset-5 ant-col-xxl-20 ant-col-xxl-offset-4"><section class="prev-next-nav"><a class="prev-page" href="/docs/spec/overview"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Overview</span><span class="chinese"></span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a><a class="next-page" href="/docs/spec/navigation"><i class="anticon anticon-left footer-nav-icon-before"><svg viewBox="64 64 896 896" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 0 0 0 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></i><span>Navigation</span><span class="chinese"></span><i class="anticon anticon-right footer-nav-icon-after"><svg viewBox="64 64 896 896" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"></path></svg></i></a></section></div></div></div><footer id="footer"><div class="footer-wrap"><div class="ant-row"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Resources</span></h2><div><a href="http://pro.ant.design">Ant Design Pro</a></div><div><a href="http://mobile.ant.design">Ant Design Mobile</a></div><div><a href="http://ng.ant.design">NG-ZORRO</a><span> - </span>Ant Design of Angular</div><div><a href="http://ng.mobile.ant.design">NG-ZORRO-MOBILE</a></div><div><a target="_blank " href="https://github.com/websemantics/awesome-ant-design"><span>Awesome Ant Design</span></a></div><div><span class="ant-badge"><a target="_blank" rel="noopener noreferrer" href="http://kitchen.alipay.com">Kitchen</a><span> - </span><span>Sketch Toolkit</span><sup data-show="true" class="ant-scroll-number ant-badge-dot" style="right:-3px;margin-top:0"></sup></span></div><div><a href="http://scaffold.ant.design">Scaffolds</a><span> - </span><span>Scaffold Market</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://umijs.org/">Umi</a> - <span>React Application Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva">dva</a> - <span>Data Flow Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design">Ant Motion</a><span> - </span><span>Motion Solution</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">Axure Library</a><span> - </span><span>Axure library</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design">Ant UX</a><span> - </span><span>Sitemap Template</span></div><div><a target="_blank " href="http://ant-design.gitee.io/"><span>China Mirror 🇨🇳</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Community</span></h2><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/antdesign"><span>Zhihu</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://medium.com/ant-design/">Medium</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://twitter.com/antdesignui">Twitter</a></div><div><a target="_blank" rel="noopener noreferrer" href="http://zhuanlan.zhihu.com/xtech"><span>Experience Cloud Blog</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://seeconf.alipay.com/">SEE Conf</a><span> - </span><span>Seeking Experience &amp; Engineering Conference</span></div><div><a target="_blank " href="/docs/spec/work-with-us"><span>Work with Us</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><span>Help</span></h2><div><a target="_blank " href="https://github.com/ant-design/ant-design">GitHub</a></div><div><a href="/changelog"><span>Change Log</span></a></div><div><a target="_blank " href="https://www.yuque.com/ant-design/course"><span>Ant Design Practical Tutorial</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="/docs/react/faq"><span>FAQ</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design"><span>Chat Room (中文)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english"><span>Chat Room (English)</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/"><span>Bug Report</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues"><span>Issues</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd"><span>StackOverflow</span></a></div><div><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd"><span>SegmentFault</span></a></div></div></div><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6"><div class="footer-center"><h2><img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="AFX Cloud"/><span>More Products</span></h2><div><a target="_blank" rel="noopener noreferrer" href="https://yuque.com/"><span>YuQue</span></a><span> - </span><span>Write your document as a team</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://yunfengdie.com/"><span>FengDie</span></a><span> - </span><span>Mobile web app builder</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a><span> - </span><span>Data Visualization</span></div><div><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a><span> - </span><span>Enterprise Node Framework</span></div><div><a target="_blank" rel="noopener noreferrer" href="http://xcloud.alipay.com/"><span>Ant Experience Cloud</span></a></div><div style="margin-top:20px"><div><div style="padding:4px;background:#fff;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.1);display:inline-block;cursor:pointer"><div style="width:80px;height:16px;border-radius:2px;background:#1890ff"></div></div></div></div></div></div></div></div><div class="bottom-bar">Made with <span class="heart">❤</span> by<a target="_blank" rel="noopener noreferrer" href="https://xtech.antfin.com"><span>AFX</span></a></div></footer></div>
    </div>
    <script src="/common.js"></script>
    <script src="/index.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-72788897-1"></script>
    <script>
    if (!location.port) {
      // Enable Google Analytics
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-72788897-1');
    }
    </script>
    <!-- Hotjar Tracking Code for ant.design -->
    <script>
    (function(h,o,t,j,a,r){
      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
      h._hjSettings={hjid:473408,hjsv:5};
      a=o.getElementsByTagName('head')[0];
      r=o.createElement('script');r.async=1;
      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
      a.appendChild(r);
    })(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
    </script>
  </body>
</html>
